<template>
<div>
<hr size="5px" color="red">
     <table class="table">
        <tr>
          <td></td>
          <td></td>
          <td class="loginandregister" >

          <!--   用if来进行登录状态的判断 -->
            <div v-if="!logging_status()">
            <router-link to="/login">登录</router-link>|
            <router-link to="/register">注册</router-link>
            </div>
            <div v-else>
               欢迎用户: [{{user}}]-----<span @click="loginout">登出</span>
            </div>
            </td>
        </tr>
      </table>
      <hr size="4px" color="silver">

      <div class="title">
        <table>
          <tr>
            <td style="width:550px"><img :src=imgUrl alt="logo" class="img1" ></td> 
            <td><el-input v-model="searchValue" placeholder="请输入内容" style="width:465px; height:32px;  margin:0px; padding:0px; line-height:30px;"></el-input> 
            <span class="search" @click="search(searchValue)">搜索</span></td>
            <td>
                <div class="nav">
                  <i class="el-icon-shopping-cart-2"></i>
                  <router-link to="/shoppingTrolley"> <span>我的购物车</span></router-link>
                </div>
            </td>
          </tr>
        </table>

      </div>
      <div class="line"></div>
            <el-menu
                  :default-active="activeIndex2"
                  class="el-menu-demo"
                  mode="horizontal"
                
                  background-color="red"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                   
                  >

                   <el-submenu index="1" style="margin-left: 200px ;">
                    <template slot="title">书籍分类</template>
                    <template v-for=" item in  catlogList" >
                    <el-menu-item index="1-1" @click="tobooks(item.id)">{{item.catelogName}}</el-menu-item>
                    </template>
                  </el-submenu>

                  
                  <el-menu-item index="2" style="margin-left: 100px ;"><router-link to="index">首页</router-link></el-menu-item>
                  
                

                 <el-menu-item index="3" style="margin-left: 100px ;" > <router-link to="/books">  全部书籍 </router-link> </el-menu-item>
                  
                  <el-menu-item index="4" style="margin-left:100px;"><a href="" target="_blank">排行</a></el-menu-item>
            </el-menu>
          
            <div class="searchShow" >
              
              <ul  v-for=" item in bookList" :data="bookList.slice((currentPage-1)*pagesize,currentPage*pagesize)">
                      <li>
                        <img :src="'http://localhost:8080/BMS/'+item.imageUrl" alt="">

                        <p> [{{item.catelogName}}]    {{item.productName}}</p>

                      </li>
              </ul>
            </div>
            
            
               <div class="footer">
                   <el-pagination style="margin-bottom:10px; margin-left:-20%;"
                         @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                         :current-page="currentPage"
                        :page-sizes="[5]" 
                         :page-size="pagesize"        
                        layout="total, sizes, prev, pager, next, jumper"
                       :total="bookList.length">    
                   </el-pagination>
               </div>
            
</div>

  
</template>

<script>
export default {
name:'searchShow',
data(){
  return{
    //分页
      currentPage:1, //初始页
       pagesize:4,  

     
		

    //用于接收其它页面传来的搜索关键字
    searchValue:'',

     imgUrl: require('../../assets/images/logo.jpg'),
       activeIndex: '2',
      activeIndex2: '1',
       catlogList:[{
        id:'',
        proId:'',
        catelogCode:'',
        catelogName:'',

      }],
       bookList:[{
        id:'',
        catlogId:'',
        productName:'',
        price:'',
        spec:'',
        stockQty:'',
        refPrice:'',
        imageUrl:'',
        shelfStatu:'',
        catelogName:''

      }],
  }
},
mounted(){
  this.logging_status()
  this.getcatlogData()
  this.searchValue=this.$route.params.searchValue;
  console.log(this.searchValue)
  this.search(this.searchValue)
},
methods:{
  logging_status:function(){
        if(localStorage.getItem("user")!=null){
         this.user=localStorage.getItem("user");
          return true
          
        }
        else{
          return false
        }
        
      }
      ,
      loginout:function(){
        localStorage.removeItem("user");
        localStorage.removeItem("userId");
         this.user=localStorage.getItem("user");
         
        alert("退出登录");
      },
       tobooks:function(id){
        this.$router.push(
      {
        name:'books',
        params:{id:id}
      }
        )
      },
      getcatlogData:function(){
        this.$axios.get("/catlog/getcatlogs").then(res=>{
              this.catlogList=res.data
              console.log(this.catlogList)
        })
      },

    search:function(searchValue){
      console.log(searchValue)
      this.$axios.get("/product/search",{params:{searchValue:searchValue}}).then(res=>{
          this.bookList=res.data
          console.log(this.bookList)
      })
    }
    ,//分页
		handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
        handleUserList() {
            this.$axios.get('http://localhost:8080/BMS/product/getproducts').then(res => {  //这是从本地请求的数据接口，
                this.bookList = res.body
            })
        },


}
}
</script>

<style scoped>

.searchShow li{
  list-style: none;
  width: 20%;
 
  float: left;
  margin-right: 50px;
  margin-top: 20px;
  
}

.table{
  width: 100%;
  height: 50px;
  color: #000;
  background-color: rgb(238, 231, 231);
  
}
.loginandregister{
  float: right;
  line-height: 50px;
  margin-right:10px ;
}
.search{
  margin-left: -4.5px;
  display: inline-block;
  background-color: #ca151e;
   width: 50px;
   height: 38px;
   border-radius: 2px;
   line-height: 32px;
   position: relative;
   top: -2px;
}
.img1{
  width: 80%;
  height: 150px;
  float: left;
}
a{
  text-decoration: none;
 
}
.nav{
  width: 120px;
  height: 40px;
  margin-left: 120px ;
  line-height: 40px;
  background-color: red;
}
.searchShow{
  margin-left: 25%;
  margin-right: 15%;
  margin-bottom: 300px;
}
.searchShow img{
  width: 80%;
  height: 200px;
}
.footer{
  float: left;
  margin-left:35%;
}
</style>